<template>
    <div class="form-sty">
        <div class="form-title" >
            <div class="span-radius"></div>
            时段分布
        </div>
        <div class="dialChart-sty" >
            <div style="height:270px" ref="leftbing"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref,onUnmounted } from 'vue';
import * as echarts from 'echarts';


    const leftbing = ref(null);

    const myEcharts = () => {
        const myChart = echarts.init(leftbing.value);
        myChart.hideLoading();

        const datalist = [
            { value: 17, name: '10年' },
            { value: 30, name: '10-20年' },
            { value: 35, name: '20-30年' },
            { value: 13, name: '30-50年' },
            { value: 33, name: '50以上' }
        ];
        const option = {
            color: ['#59d6ec', "#79d534", "#dbe548", "#ff4747", "#6ec696", "#ffc750"],
            backgroundColor: '#59d6ec00',
            legend: {
                y: "5%",
                x: 'left',
                textStyle: {
                    color: '#fff',
                    fontSize: 12,
                },
                icon: 'roundRect',
                data: datalist,
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: [20, '50%'],
                    center: ['50%', '60%'],
                    data: datalist.sort((a, b) => a.value - b.value),
                    roseType: 'radius',
                    label: {
                        normal: {
                            show: true,
                            formatter: "{b} \n {c}",
                            textStyle: {
                                fontSize: 14,
                            },
                            position: 'outside'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay(idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };

            myChart.setOption(option);
        };

        onMounted(async() => {
            myEcharts()
        });

</script>

<style scoped>
@import "@/Css/index.css";
</style>